<template>
    <div>
        <cu-navbar>
            <block slot="content">添加地址</block>
        </cu-navbar>
        <view class="container">
            <div style="background-color: #ffffff;padding: 20px">
                <u-form @submit="submitForm" :model="formData" :rules="formRules" label-width="100px">
                    <u-form-item label="收货人姓名" prop="consignee">
                        <u-input v-model="formData.consignee" placeholder="请输入姓名" />
                    </u-form-item>
                    <u-form-item label="联系电话" prop="phone">
                        <u-input v-model="formData.mobile" placeholder="请输入联系电话" />
                    </u-form-item>
                    <u-form-item label="所在地区" prop="address">
                        <div @click.stop="clickress" style="color: rgb(192, 196, 204);">
                            {{ formData.address || '选择地区'}}
                        </div>
                        <u-picker mode="region" @confirm="confirm" @cancel="selectAddressShow=false"
                                  v-model="selectAddressShow"></u-picker>
                    </u-form-item>
                    <u-form-item label="详细地址" prop="detailaddress">
                        <u-input class="textarea" v-model="formData.detailaddress" placeholder="请输入详细地址" />
                    </u-form-item>
                    <u-form-item label="设为默认地址" prop="isdefault">
                        <u-switch v-model="formData.isdefault" />
                    </u-form-item>
                    <u-form-item>
                        <view class="submit" style="width: 100%" @click="submitForm">
                            保存
                        </view>
                    </u-form-item>
                </u-form>
            </div>
        </view>
    </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
          consignee: '',
          mobile: '',
        region: [],
        address: '',
          detailaddress: '',
          isdefault: false
      },
        area: '',
        city: '',
        province: '',
        selectAddressShow: false,
      formRules: {
          consignee: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
          mobile: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
          address: [{ required: true, message: '请选择所在地区', trigger: 'change' }],
          detailaddress: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
      },
    };
  },
  methods: {
      clickress() {
          console.log('d000das')
          this.selectAddressShow = true
      },
      confirm(e) {
          this.formData.address = e.province.label + e.city.label + e.area.label
          this.province = e.province.label
          this.city = e.city.label
          this.area = e.area.label
      },
    submitForm() {
        this.$api
            .addaddress({
                ...this.formData,
                isdefault: this.formData.isdefault ? 1 : 0,
                area: this.area,
                city: this.city,
                province: this.province
            })
            .then((res) => {
                if (res.code == 1) {
                    this.$common.successToShow(res.reason);
                    const statusObj = uni.getStorageSync('statusObj') || {}
                    if (statusObj.address) {
                      uni.navigateBack();
                    } else {
                      uni.setStorageSync('statusObj', {
                        ...(uni.getStorageSync('statusObj') || {}),
                        address: 1
                      })
                      uni.switchTab({
                        url:'/pages/home/home'
                      })
                    }
                } else {
                  this.$common.errorToShow(res.reason);
                }
            });
    },
  },
};
</script>

<style lang="scss">
.container{
}
</style>
